<template>
  <el-row class="w-full h-full pt-1">
    <el-col :span="8">
      <div class="h-full">
        <dv-border-box13
          class="p-1.5"
          style="height: calc(100% - 18px)"
          :color="['#6e87a4', '#40c3c8']"
        >
          <span class="h-1/4 text-lg flex justify-center mt-2">{{ data.totalTitle }}</span>
          <ExpenseTotal class="inline-block w-14 h-14 mx-14 ml-16" style="fill: #40c2c8 !important;" />
          <span class="h-1/4 text-3xl flex justify-center">
            <span class="h-1/4 flex justify-center" style="font-size: 32px">{{ data.totalValue }}<span class="text-lg mt-1.5 ml-1.5"> {{ data.unit }}</span></span>
          </span>
        </dv-border-box13>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="h-full">
        <dv-border-box13
          class="p-1.5"
          style="height: calc(100% - 18px)"
          :color="['#6e87a4', '#40c3c8']"
        >
          <span class="h-1/4 text-lg flex justify-center mt-2">{{ data.outpatientTitle }}</span>
          <ExpenseOutpatient class="inline-block w-14 h-14 ml-16" style="fill: #1296db !important;" />
          <span class="h-1/4 text-3xl flex justify-center">
            <el-link type="primary" style="font-size: 32px" @click="goToOutPatientExpense">{{ data.outpatientValue }}</el-link>
            <span class="text-lg mt-1.5 ml-1.5"> {{ data.unit }}</span>
          </span>
        </dv-border-box13>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="h-full">
        <dv-border-box13
          class="p-1.5"
          style="height: calc(100% - 18px)"
          :color="['#6e87a4', '#40c3c8']"
        >
          <span class="h-1/4 text-lg flex justify-center mt-2">{{ data.hospitalTitle }}</span>
          <ExpenseHospital class="inline-block w-14 h-14 ml-16" style="fill: #7cba59 !important;" />
          <span class="h-1/4 text-3xl flex justify-center">
            <el-link type="primary" style="font-size: 32px" @click="goToHospitalExpense">{{ data.hospitalValue }}</el-link>
            <span class="text-lg mt-1.5 ml-1.5"> {{ data.unit }}</span>
          </span>
        </dv-border-box13>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, defineProps } from "vue";
import ExpenseTotal from "@/assets/svg/expense_total.svg?component";
import ExpenseOutpatient from "@/assets/svg/expense_outpatient.svg?component";
import ExpenseHospital from "@/assets/svg/expense_hospital.svg?component";

const props = defineProps({
  data: Object
});
const data = props.data;

// 路由跳转
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const goToOutPatientExpense = () => {
  router.push({
    name: "OutpatientExpense",
    params: {}
  });
};
const goToHospitalExpense = () => {
  router.push({
    name: "HospitalExpense",
    params: {}
  });
};
</script>

<style scoped lang="scss"></style>
